<template>
  <div class="registry">
    <div class="title">用户注册</div>
    <div class="item" v-show="itemIndex == 1">
      <div class="item-input">
        <input type="text" placeholder="手机号" v-model="user.phone" @keyup="checkPhone" />
        <p ref="phone" class="tip">请输入合法手机号</p>
      </div>
      <div class="item-input">
        <input type="text" ref="codeValue" placeholder="验证码" v-model="user.checkCode" />
        <span class="checkcode" ref="checkcode" @click="sendCheckCode">发送验证码</span>
        <p ref="wrcheckcode" class="tip">请输入正确验证码</p>
      </div>
      <div class="item-input">
        <input type="password" placeholder="密码" v-model="user.password" @keyup="checkPassword" />
        <p ref="password" class="tip">密码长度不低于6位，必须包含小写字母和数字</p>
      </div>
      <div class="item-input">
        <input type="password" placeholder="确认密码" v-model="repassword" @keyup="checkRePassword" />
        <p ref="repassword" class="tip">确认密码和密码不一致</p>
      </div>
    </div>
    <div class="item" v-show="itemIndex == 2">
      <div class="item-input">
        <input type="text" placeholder="昵称" v-model="user.nickname" @blur="checkNickname" />
        <p ref="nickname" class="tip">昵称不能少于2位</p>
      </div>
      <div class="item-input">
        <input type="text" placeholder="个性签名" v-model="user.remark" />
      </div>
      <div class="item-input sex">
        <span>性别：</span>
        <input type="radio" v-model="user.sex" value="0" />男
        <input type="radio" v-model="user.sex" value="1" />女
      </div>
    </div>

    <div class="item" v-show="itemIndex == 3">
      <div class="item-input">
        <div class="name">{{user.nickname}}</div>
      </div>
      <div class="item-input">
        <div class="img">
          <img :src="user.img" class="icon iconfont icon-addpictures" alt @click="showWindow" />
          <div class="addImg" v-show="showImgBox">
            <Cropper @closeEjectWindows="closeWindow" @setImg="imgData($event)"></Cropper>
          </div>
        </div>
        <p ref="img" class="tip">请上传头像</p>
      </div>
      <div class="item-input">
        <div class="id">{{user.phone}}</div>
      </div>
      <div class="item-input">
        <div class="remark">{{user.remark}}</div>
      </div>
      <div class="item-input">
        <input type="button" class="submmit" value="注        册" @click="callRegistry" />
      </div>
    </div>

    <footer>
      <div class="item-input button">
        <input type="button" value="上一页" @click="changeItem(-1)" />
        <input type="button" value="下一页" @click="changeItem(1)" />
      </div>
      <div class="item-jump">
        <p class="jump">
          已有账号，去
          <a href="javascript:;" @click="jumpPage('/login')">登录</a>
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import Cropper from "./cropper";
import axios from "axios";

export default {
  components: {
    Cropper
  },
  computed: {
    ...mapState(["ip", "port"])
  },
  data() {
    return {
      user: {
        img: "",
        sex: 0
      },
      itemIndex: 2,
      imgFile: "",
      showImgBox: false,
      intervalId: null,
      repassword: ""
    };
  },
  methods: {
    ...mapActions(["jumpPage", "registry"]),
    changeItem(value) {
      // 判断跳转是否符合要求
      if (this.itemIndex + value < 1 || this.itemIndex + value > 3) {
        return;
      }
      // 第一页跳转第二页校验数据是否正确
      if (this.itemIndex == 1) {
        // 校验手机号，密码，确认密码
        if (this.checkPhone() & this.checkPassword() & this.checkRePassword()) {
          // 都没有问题，校验验证码正确性
          axios
            .get(
              `http://${this.ip}:${this.port}/consumer/requireCheckCode/${this.user.checkCode}`
            )
            .then(res => {
              if (res.data.code != 200) {
                this.$refs.wrcheckcode.style.display = "inline";
                return;
              }
              this.itemIndex = this.itemIndex + value;
            });
        }
        return;
      }
      // 第二页跳转第三页校验数据
      if (this.itemIndex == 2) {
        if (this.checkNickname() || value < 0) {
          this.itemIndex = this.itemIndex + value;
        }
        return;
      }
      this.itemIndex = this.itemIndex + value;
    },
    closeWindow() {
      this.showImgBox = false;
    },
    showWindow() {
      this.showImgBox = true;
    },
    imgData(data) {
      this.user.img = data;
      console.log(data);
    },
    // 发送手机验证码
    sendCheckCode() {
      if (this.intervalId != null) {
        return;
      }
      if (this.checkPhone()) {
        axios
          .get(
            `http://${this.ip}:${this.port}/consumer/sendCheckCode/${this.user.phone}`
          )
          .then(res => {
            if (res.data.code == 200) {
              this.$refs.codeValue.value = res.data.data;
            }
          });

        let time = 60;
        this.intervalId = setInterval(() => {
          this.$refs.checkcode.innerHTML = `${time}S`;
          time = time - 1;
          if (time < 0) {
            clearInterval(this.intervalId);
            this.intervalId = null;
            this.$refs.checkcode.innerHTML = "重新发送";
          }
        }, 1000);
      }
    },
    // 检查手机号是否符合规则
    checkPhone() {
      let pattern = /^1[34578]\d{9}$/;
      if (!this.user.phone || !pattern.test(this.user.phone)) {
        this.$refs.phone.style.display = "inline";
        return false;
      }
      this.$refs.phone.style.display = "none";
      return true;
    },
    // 校验密码
    checkPassword() {
      // /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[#@*&.])[a-zA-Z\d#@*&.]*$/只包含大小写字母数字特殊字符
      let pattern1 = /^(?=.*?[a-z])(?=.*?\d)[a-z\d]*$/;
      if (
        !this.user.password ||
        this.user.password.length < 6 ||
        !pattern1.test(this.user.password)
      ) {
        this.$refs.password.style.display = "inline";
        return false;
      } else {
        this.$refs.password.style.display = "none";
        return true;
      }
    },
    // 校验确认密码
    checkRePassword() {
      if (this.user.password == this.repassword) {
        this.$refs.repassword.style.display = "none";
        return true;
      } else {
        this.$refs.repassword.style.display = "inline";
        return false;
      }
    },
    // 判断昵称是否符合规则
    checkNickname() {
      if (!this.user.nickname || this.user.nickname.length < 2) {
        this.$refs.nickname.style.display = "inline";
        return false;
      } else {
        this.$refs.nickname.style.display = "none";
        return true;
      }
    },
    // 头像确认
    checkImg() {
      if (!this.user.img || this.user.img == "") {
        this.$refs.img.style.display = "inline";
        return false;
      } else {
        this.$refs.img.style.display = "none";
        return true;
      }
    },
    // 注册
    callRegistry() {
      if (this.checkImg()) {
        this.registry(this.user);
      }
    }
  }
};
</script>

<style scoped>
.registry {
  position: relative;
}

.title {
  width: 200px;
  margin: 60px auto 30px;
  text-align: center;
  font-size: 30px;
  color: #fff;
}

.item {
  width: 430px;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 35px 0 115px 0;
  margin: 0 auto;
}

input::-webkit-input-placeholder {
  color: #fff;
}

input::-moz-input-placeholder {
  color: #fff;
}

input::-ms-input-placeholder {
  color: #fff;
}

.item-input {
  position: relative;
  width: 360px;
  margin: 0 auto;
  padding-bottom: 30px;
}

.tip {
  position: absolute;
  top: 55px;
  left: 25px;
  color: #8f3a3e;
  display: none;
  font-size: 14px;
}

.item-input input {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding-left: 25px;
  font-size: 18px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 24px;
  background-color: transparent;
  outline: none;
}

.checkcode {
  position: absolute;
  right: 22px;
  top: 16px;
  color: #2a3662;
  cursor: pointer;
}

footer {
  position: absolute;
  width: 100%;
  bottom: 20px;
}

.button input {
  width: 120px;
  padding: 0;
}

.button input:nth-child(2) {
  float: right;
}

.item-jump {
  width: 100%;
  text-align: center;
}

.jump {
  color: #fff;
}

.jump a {
  color: #2a3662;
}

.name {
  text-align: center;
  font-size: 25px;
  color: #fff;
}

.id {
  text-align: center;
  font-size: 18px;
  color: #fff;
}

.remark {
  text-align: center;
  font-size: 18px;
  color: #fff;
}

.item-input .submmit {
  padding: 0;
  background: #4e844e;
}

.img {
  position: relative;
  text-align: center;
}

.icon-addpictures {
  width: 70px;
  height: 70px;
  font-size: 70px;
  border-radius: 10px;
}

.addImg {
  position: absolute;
  top: -15px;
  left: -20px;
  width: 400px;
  /* height: 300px; */
  background-color: rgb(230, 230, 230);
  z-index: 1;
  box-shadow: 5px 5px 2px rgb(157, 155, 155), 5px -5px 2px rgb(157, 155, 155),
    -5px 5px 2px rgb(157, 155, 155), -5px -5px 2px rgb(157, 155, 155);
}

.sex {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  color: #fff;
  padding-left: 50px;
}

.sex span {
  font-size: 18px;
  color: #fff;
}

.sex input {
  width: 30px;
  height: 15px;
  margin-left: 35px;
}
</style>